<template>
    <div class="container">
        <Navbar :title="title" left-text="返回" left-arrow @click-left="goBack" fixed placeholder></Navbar>

        <van-sticky :offset-top="44">
            <van-search v-model="shopInfo" show-action shape="round" placeholder="请输入搜索关键词" input-align="center"
                @search="onSearch">
                <template #action>
                    <div @click="onType">
                        <van-icon name="apps-o" size="1.5rem" style="vertical-align: middle;" />
                    </div>
                </template>
            </van-search>

            <van-dropdown-menu active-color="#1989fa">
                <van-dropdown-item v-model="flag" :options="option1" @change="onFlag" />
                <van-dropdown-item v-model="OrderBy" :options="option2" @change="onOrderBy" />
            </van-dropdown-menu>
        </van-sticky>

        <div class="clear"></div>
        <div class="mainWarp" style="background:#f3f3f3">
            <ul class="proul" v-if="products.length > 0">
                <li v-for="item in products" :key="item.id">
                    <router-link :to="{ path: '/product/base/detail', query: { id: item.id } }"><img
                            :src="item.cover_cdn" />
                    </router-link>
                    <router-link :to="{ path: '/product/base/detail', query: { id: item.id } }">
                        <p class="tit"><span :class="item.flag_class2">{{ item.flag_text }}</span> {{ item.name }} </p>
                    </router-link>
                    <div class="price">
                        <p>￥{{ item.price }}<span>￥8999</span></p>
                    </div>
                </li>
            </ul>

            <div class="proul" v-else>
                <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                    description="暂无商品" />
            </div>
        </div>

        <van-popup v-model:show="show" round position="bottom">
            <van-picker title="商品分类" :columns="columns" @cancel="show = false" @confirm="onConfirm" />
        </van-popup>
    </div>
</template>

<script>
import Navbar from '../Navbar.vue'
export default {
    name: "SearchList",
    data() {
        return {
            title: '搜索商品',
            flag: 0,
            OrderBy: 'id',
            shopInfo: '',
            show: false,
            option1: [
                { text: '全部商品', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '热销商品', value: 2 },
                { text: '推荐商品', value: 3 },
            ],
            option2: [
                { text: '默认排序', value: 'id' },
                { text: '价格排序', value: 'price' },
                { text: '库存排序', value: 'stock' },
            ],
            products: [],
            typeList: [],
            columns: [],
            user: this.$cookies.get('ShopUser') ? this.$cookies.get('ShopUser') : '',
            typeid: '',
        }
    },
    methods: {
        goBack() {
            this.$router.push('/');
        },
        async initProducts() {
            let res = await this.$api.initProducts();
            if (res.code === 1) {
                this.products = [...res.data.hotProducts, ...res.data.newProducts, ...res.data.tuiProducts];
                // console.log(this.products);
            } else {
                this.$notify({
                    type: "warning",
                    message: "获取失败",
                    onClose: () => {
                        return false;
                    },
                });
            }
        },
        async initType() {
            let res = await this.$api.initType();
            // console.log(res.data);
            if (res.code === 1) {
                this.typeList = res.data;
                res.data.forEach(item => {
                    this.columns.push(item.name);
                });
            } else {
                this.$notify({
                    type: "warning",
                    message: "获取失败",
                    onClose: () => {
                        return false;
                    },
                });
            }
        },
        async onSearch(val) {

            let data = {
                name: val,
                flag: this.flag,
                OrderBy: this.OrderBy,
                userid: this.user.id,
                typeid: this.typeid,
            };
            let res = await this.$api.search(data);

            if (res.code === 1) {
                this.products = res.data;
            } else {
                this.products = [];
            }
        },
        onType() {
            this.show = true
        },
        onConfirm(item, index) {
            // console.log(this.typeList[index].id);
            this.typeid = this.typeList[index].id;
            // console.log(this.typeid);
            // console.log(this.typeList[index]);

            // return false;
            this.show = false;
            this.onSearch(this.shopInfo);
        },
        onFlag(item) {
            this.flag = item
            this.onSearch(this.shopInfo);
        },
        onOrderBy(item) {
            this.OrderBy = item
            this.onSearch(this.shopInfo);
        }
    },
    created() {
        let typeid = this.$route.params.id;
        if (typeid) {
            this.typeid = typeid;
            this.onSearch();
        } else {
            this.initProducts();
        }
        this.initType();

    },
    components: {
        Navbar
    }
}
</script>

<style >
.tip-h {
    padding: 5px;
    border-radius: 10%;
    background-color: #ee0a24;
    color: #fff;
}

.tip-c {
    padding: 5px;
    border-radius: 10%;
    background-color: #1989fa;
    color: #fff;
}

.tip-n {
    padding: 5px;
    border-radius: 10%;
    background-color: #7232dd;
    color: #fff;
}
</style>